<!-- 

-----------------------------------

屏幕大小：
    6.0 寸   5.5 寸  ..... 
    屏幕大小指的是对角线长度。

    iPhone4:  3.5
    iPhone6:  4.7  
    iPhone6P: 5.5

    寸 是 英寸    1英寸 = 2.54CM

-----------------------------------

屏幕分辨率：
    1000 * 2000
    出厂就定死的。
    1000指的水平方向上发光点的个数。
    2000指的是垂直方向上发光点的个数。

    显示分辨率是可以修改的。

    屏幕分辨率 >= 显示分辨率

    iPhone6: 750 * 1334

    屏幕分辨率 = 设备像素 = 物理像素

-----------------------------------

屏幕密度（了解）：
    是指屏幕上每英寸里包含的物理像素点个数，单位是 ppi （pixels per inch）

    屏幕分辨率： 1000 * 2000 
    屏幕尺寸： 5寸

    PPI = (1000*1000 + 2000*2000)开根号 / 屏幕尺寸

-----------------------------------

CSS中的单位：
    绝对单位：
        cm   mm   in .....
    相对单位
        em   和fs有关     fs是16px   1em=16px    fs是20px    1em=20px
        rem
        vw
        vh

-----------------------------------

pixel到底是什么:
    w100px  h100px   
    pixel 是 px全称

    1个px就是一个像素点   一个像素点不一定是正方形。

    像素的分类：
        1）CSS像素   
        2）设备像素    也叫物理像素，说白了，就是分辨率
        3）设备独立像素  也叫逻辑像素，出厂时定死

-----------------------------------

物理像素就是一个发光点。

CSS像素，之前学习css时，编写的100px 100px指的就是CSS像素。

物理像素和CSS像素有什么关系？

div{
    w:100px;
    h:100px;
}

在PC端，1个CSS像素会映射成1个物理像素，说白了，就是1个CSS像素，映射成1个发光点。

-----------------------------------

设备独立像素：
    对于我们开发者来说，我们面对的不是物理像素，而是设备独立像素。

    iPhone5    设备独立像素是：320   DPR = 2
    iPhone6    设备独立像素是：375   DPR = 2
    iPhone6P   设备独立像素是：414   DPR = 3
        

-----------------------------------

把电脑上的网页装到手机上，分两步：
    1）把网页放到虚拟容器中，这个虚拟容器通过是980     这个980可以称为布局视口
    2）把虚拟容器压缩后，放到手机中，手机的宽度通常是远小于虚拟窗口
    3）导致网页中的盒子都会被压缩，我们看到的网页内容都变小了

如何做让它不变小？
    1）想办法让虚拟容器不压缩
    2）设置虚拟容器的大小    设置成和手机的宽度一样的    手机的宽度指设备独立像素，也就是视觉视口

视口分两类：
    1）布局视口
    2）视觉视口
    2）理想视口

-----------------------------------

设置视口：
    自动生成的：
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    考拉的：
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    淘宝的：
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

    网易云音乐：
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

    小米：
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui,viewport-fit=cover">

-----------------------------------
屏幕大小：
    英寸 
    iPhone4  3.5
    iPhone6  4.7
    iPhone6P 5.5
-----------------------------------
屏幕分辨率：
    物理像素   屏幕上发光点的个数    iPhone6 750 * 1334 
    不可修改的
-----------------------------------
屏幕密度：
    每英寸上，发光点的个数。
-----------------------------------
单位：
    绝对单位 cm  mm  in...
    相对单位 em  rem  vw  vh
-----------------------------------
像素的分类：
    1）物理像素   屏幕分辨率
    2）设备独立像素   逻辑像素
    3）CSS像素
-----------------------------------
物理像素  和  CSS像素 在普通屏上：
    1:1
-----------------------------------
CSS像素 和  设备独立像素 在高清屏上：
    1:1
-----------------------------------
物理像素  和  设备独立像素 在普通屏或高清屏上：
    n:1
-----------------------------------
设备独立像素也指手机的宽度:
    iPhone4: 320
    iPhone5: 320
    iPhone6: 375
    iPhone6P: 414
-----------------------------------
DPR:
    物理像素 / 设备独立像素
    普通屏：1
    高清屏：2 3 4 
-----------------------------------
把PC端的网页放手机上分两步：
    1）PC网页放虚拟容器中  虚拟容器通常是980   虚拟容器叫布局视口
    2）把虚拟容器压缩后，放到手机中，导致页面中的盒子都会被压缩
-----------------------------------
如何让盒子不压缩：
    设置布局视口和手机宽度一样，此时的布局视口就是理想视口
-----------------------------------
视口分类：
    布局视口
    视觉视口
    理想视口
-----------------------------------
设置视口：
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-----------------------------------
媒体查询：
    可以根据不同的设备，设置不同的样式
-----------------------------------
移动端适配：
    大屏上盒子大一点，小屏上盒子小一点
-----------------------------------
适配方案：
    1）%  %很难统一   用的不多
    2）flex布局 
    3）rem + 动态设置html标签的fs
    4）vw适配
-----------------------------------
rem + 动态设置html标签的fs：
    策略：
        设计图：750    html的fs是75
        设计图：375    html的fs是37.5
        设计图：320    html的fs是32
        设计图：414    html的fs是41.4

    设计图：375：  
        有一个盒子，宽是123px  高是456px  

    适配：大屏上盒子大一点，小屏上盒子小一点
        肯定不能以px作单位  需要使用rem做单位

    px转rem:
        1）计算器算  
        2）webpack 
        3）less或scss
        4）vscode插件
    
    vscode插件：
        1）安装插件
        2）设置  

    适配所有屏（动态设置html标签的fs）：
        淘宝出了一个lib-flexible
-----------------------------------

rem适配：
    策略1：
        设计图：750    html的fs是75
        设计图：375    html的fs是37.5
        设计图：320    html的fs是32
        设计图：414    html的fs是41.4

        使用淘宝的lib_flexible 
        
    策略2：
        设计图：750    html的fs是100
        设计图：375    html的fs是50
        ...

        需要自己写js来适配

-----------------------------------

-->